<!--
 * @Description: 该页面功能已经废弃，此页面内容仅做留存以备查询。-- Taoist
-->
<template>
	<view class="mainPage" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view class="flex-container">
			<view class="title">选择挂号费单价 (元)</view>
			<view class="flex-item" :class="index==chengshiNum?'active':''" v-for=" (item,index) in price" :key="index" @click="dianji(index)">{{item.label}}</view>
		</view>
		<view class="flex-container">
			<view class="title">自定义挂号费 (元)</view>
			<input class="title" placeholder="请输入自定义挂号费价格" type="number" v-model="cost" />
		</view>
		<view class="but">
			<button>确定</button>
		</view>
	</view>
</template>
<script>
import publicHead from "@/components/publicHead/publicHead.vue"
export default {
	components: {
		publicHead
	},
	data() {
		return {
			title: "挂号费设置",
			cost: '',
			chengshiNum: 100,
			price: [{
				label: '9.00',
				value: 1,
			},
			{
				label: '10.00',
				value: 2,
			},
			{
				label: '12.00',
				value: 3,
			}, {
				label: '9.00',
				value: 4,
			},
			{
				label: '10.00',
				value: 5,
			},
			{
				label: '12.00',
				value: 6,
			}
			],
		}
	},
	onLoad() {
	},
	methods: {
		dianji(index) {
			this.chengshiNum = index
			console.log(index)
		}
	}
}
</script>
<style scoped lang="scss">
.flex-container {
	// display: -webkit-flex;
	// display: flex;
	// -webkit-justify-content: flex-end;
	// justify-content: space-around;
	width: 100%;
	background-color: #ffffff;
	padding: 30rpx;
	margin-top: 14rpx;
	.title {
		padding: 20rpx;
		font-size: 28rpx;
	}
	.flex-item {
		width: 30%;
		margin: 30rpx 10rpx;
		color: #adadad;
		display: inline-block;
		border: 1rpx #d1d1d1 solid;
		padding: 20rpx 30rpx;
		border-radius: 60rpx;
		text-align: center;
	}
	.active {
		background-color: #fe7600ff;
		color: #ffffff;
	}
}
.but {
	width: 100%;
	position: absolute;
	top: 800rpx;
	button {
		width: 90%;
		background: linear-gradient(219deg, #ff9331 0%, #fe7600 100%);
		border-radius: 8rpx;
		font-weight: 400;
		color: #ffffff;
	}
}
</style>
